<template>
  <div class="shopingcar">
        <div class="shopingheader">
            <h1>我的购物车 (全部???)</h1>
            <div class="shopingheadercontent">
                <h3 class="shopinginformation">商品信息</h3>
                <h3 class="shopingcharge">单价</h3>
                <h3 class="shopingamount">数量</h3>
                <h3 class="shopingallcharge">金额</h3>
                <h3 class="shopingremove">操作</h3>
            </div>
        </div>
        <div class="content">
            <ul>
                <li v-for= "(p,index) in k" :key="p.id">
                    <div class="contenttips"><input type="checkbox"></div>
                    <div class="contenttips"><img :src="p.url" alt=""></div>
                    <div class="contenttips formation">{{p.information}}</div>
                    <div class="contenttips charge">{{p.charge}}</div>
                    <div class="contenttips addordelete">
                        <el-input-number size="small"   
                        :min="1" :max="10" label="描述文字" v-model="num[index]"
                        @change="hanlechange($event,index,p.charge)"></el-input-number>
                    </div>
                    <div class="contenttips allch"> 总价:{{totalnum[index]}}</div>
                    <div class="contenttips alldelete">按钮删除</div>
                </li>
    
            </ul>
        </div>
        <div class="shopingfooter">
            <div class="shopfooter"><input type="checkbox">全选</div>
            <div class="shopfooter"><button>删除全部</button></div>
            <div class="shopfooter">已选商品？？？</div>
            <div class="shopfooter">总计？？？</div>
            <div class="shopfooter"><button>结算</button></div>
        </div>
  </div>
</template>

<script>
//import axios from 'axios'
export default {
    name:"shopingcar",
    data() {
        return {
            // 给数据从浏览器中拿过来并转换成js对象
            k:JSON.parse(localStorage.getItem("k")),
            num: [],
            totalnum:[],
            
        }
    },
    computed:{

    },
    methods:{
        hanlechange(e,index,charges){
            //input框改变事件，拿到三个参数，商品单价，数量，下标
        
            console.log(e,index,charges);
            // input框改变事件,收集到input中数据,并接收两个参数,计算出总价
            //字符串切割slice方法
            var charge=parseFloat(charges.slice(1,-1));
            //console.log(e,charge);
            //计算出总价并保留两位小数返回totalnum
            this.num[index]=e;
             this.totalnum[index]=(e*charge).toFixed(2);
             console.log(this.totalnum);
            
            
        }
    },
   beforeMount(){
        this.$bus.$on('demo',(data)=>{
           
            this.k=data;
            //console.log(k); k是一个数组
            // 给数据存到浏览器中
            localStorage.setItem("k",JSON.stringify(this.k)) 
            console.log("我是购物车",this.k);
        })
    },

    // watch:{
    //     k:{ 
    //         deep:true,
    //         handler(newva,old){
    //             console.log("我变化了");
    //         }
    //     }
    // }
}
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.shopingheader{
    width: 1300px;
    height: 70px;
    background-color: pink;
}

.shopingcharge{
    position: relative;
    left: 600px;
}
h3{
    float: left;
}
.shopinginformation{
    position: relative;
    left: 200px;
}
.shopingamount{
    position: relative;
    left: 780px;
}
.shopingallcharge{
    position: relative;
    left: 910px;
}
.shopingremove{
    position: relative;
    left: 1040px;
}
.shopingcar{
    width: 1300px;
    
    margin: 0 auto;
}
li{
    width: 1300px;
    height: 120px;
    margin: 5px;
    background-color: red;
    list-style: none;
}
.contenttips{
    float: left;
    height: 120px;
    line-height: 120px;
  
}
.content{
    width: 1300px;
}
.contenttips img{
    width: 100px;
    height: 120px;
    position: relative;
    left: 30px;
}
.shopingfooter{
    width: 1300px;
    height: 70px;
    background-color: pink;
}
.shopfooter{
    float: left;
    line-height: 70px;
}
.formation{
    position: relative;
    left: 80px;
    width: 250px;
    font-size: 12px;
    line-height: 20px;
}
.charge{
    position: relative;
    left: 300px;
}
.addordelete{
    position: relative;
    left: 430px;
}
.allch{
    position: relative;
    left: 505px;
}
.alldelete{
    position: relative;
    left: 590px;
}
</style>